<template>
  <div class="tool-box">
    <el-button-group>
      <el-button class="tool-btn" @click="onSave" title="连接模式">保存</el-button>
      <el-button class="tool-btn" title="编辑模式">重做</el-button>
    </el-button-group>
    <el-button-group>
      <el-button class="tool-btn">复制</el-button>
      <el-button class="tool-btn">粘贴</el-button>
    </el-button-group>
    <el-button-group>
      <el-button class="tool-btn">上一步</el-button>
      <el-button class="tool-btn">下一步</el-button>
    </el-button-group>
    <el-button-group>
      <el-button class="tool-btn" @click="onDelete">删除</el-button>
    </el-button-group>
    <el-button-group>
      <el-button class="tool-btn" @click="onCenter">居中</el-button>
    </el-button-group>
  </div>
</template>

<script>
  import engineJsonTransform from './engineJsonTransform'
  import engineTbFlowApi from '@/apis/dpsApp/engineTbFlowApi.js'

  export default {
    name: 'ToolBar',
    activated () {
      this.onCenter()
    },
    methods: {
      onSave () {
        let conf = this.graph.toJSON()
        let flowConfiguration = engineJsonTransform.transform(this.flowCode, this.sceneCode, this.flowVersion, conf)
        let saveData = {}
        saveData.flowConfiguration = flowConfiguration
        saveData.flowCode = this.flowCode
        saveData.sceneCode = this.sceneCode
        saveData.flowVersion = this.flowVersion
        saveData.flowConfigurationEditor = conf
        saveData.id = this.id
        this.doSaveData(saveData)
      },
      onDelete () {
        let cells = this.graph.getSelectedCells()
        for (let cell of cells) {
          this.graph.removeNode(cell)
        }
      },
      onCenter () {
        this.graph.center()
      },
      doSaveData (data) {
        engineTbFlowApi.updateFlowConfigurationService(data)
      }
    },
    created () {
    },
    props: {
      graph: {},
      flowCode: {
        type: String,
        default: null
      },
      sceneCode: {
        type: String,
        default: null
      },
      flowVersion: {
        type: String,
        default: null
      },
      id: {
        type: Number,
        default: null,
      }
    }
  }
</script>

<style scoped>
  /*.tool-btn {*/
  /*padding: 5px;*/
  /*}*/

  .tool-box {
    margin: 5px;
  }

  /*.iconfont{*/
  /*line-height: 45px;*/
  /*font-size: 24px;*/
  /*color: #B3B3B3;*/
  /*}*/
  /*.iconfont:hover{*/
  /*color: #5F95FF;*/
  /*cursor: pointer;*/
  /*}*/
</style>
